vue-toastr

參考toastr.js 的Vue.js提示/通知框(Toast notification)

Github

s4l1h/vue-toastr

使用方式

使用方式有兩種：

1. Component
2. Plugin

Use as Component

註冊

import Toastr from 'vue-toastr';
import 'vue-toastr/dist/vue-toastr.css'
Vue.component('vue-toastr',Toastr);

HTML

<vue-toastr ref="toastr"></vue-toastr>

JS

this.$refs.toastr.i("XXXXXX");

Use as Plugin

註冊

import Toastr from 'vue-toastr';
import 'vue-toastr/dist/vue-toastr.css'
Vue.use(Toastr);

使用API

//Information
this.$toastr.i("xxxxx");
//Error
this.$toastr.e("xxxxx");
//Success
this.$toastr.s("xxxxx");
//Warning
this.$toastr.w("xxxxx");

以下依據Plugin的使用方式做一些範例。

範例

設定全域預設選項

const toastrConfig = {
    defaultTimeout: 2000,
	defaultProgressBar: true,
	defaultProgressBarValue: 0,
	defaultType: "info",
	defaultPosition: "toast-top-right",
	defaultCloseOnHover: false,
	defaultStyle: { "background-color": "red" }
};

Vue.use(Toastr, toastrConfig);

以下是vue-toastr提供的選項，若要使用在全域設定，則加上前綴詞default。

Options

顯示時額外設定選項

• 若在此無另外設定，以全域預設選項為主
• 當設定name屬性時，可利用後面提到的API由程式控制關閉

this.$toastr.Add({
        name: "myInfo",
        title: "Demo",
        msg: "I overwrite the global options by myself!",
        clickClose: false, //Disable click to close 
        timeout: 3000, // 3 sec
        position: "toast-top-full-width",
        type: "error", //error, warning, success, info
        preventDuplicates: true, 
        style: { backgroundColor: 'blue',width:'250px' }
    });

關閉

指定名稱關閉：

this.$toastr.removeByName("myInfo");

指定類型關閉：

this.$refs.toastr.removeByType("error"); // error, warning, success, info

保留訊息

我們可以透過設定選項：closeOnHover=false
以讓使用者Hover到Toastr訊息時能保留訊息在畫面上不關閉。
(移開時，timeout會重新倒數)

this.$toastr.Add({
        closeOnHover: false,
        timeout: 2000
    });